HTML - Propriedades ou Atributos - Hidden

É uma das propriedades ou atributos mais usados.

Define se um item deve ou não ser visivel ao usuário.

O motivo para esconder o item são diversos e até algumas implementações técnicas de funcionalidades utilizam esse recurso.

Por exemplo, podemos ter o caso de um texto que anteriormente era válido mas hoje é irrelevante.

Já tive trechos de páginas que pediram para retirar e eu só coloquei hidden...logo depois pediram para voltar o item e meu trabalho foi pequeno graças a intuição técnica.

Outro caso onde se usa muito hidden é no processo de retorno de dados ao servidor. Quando for dado submit no form precisamos de mais informações e estas não são relevantes ao usuário por isso são escondidas.

Outro uso do hidden é na interface com o usuário. Menus podem ser exibidos e escondidos conforme o usuário clica num item.

Usos do Hidden : Input type hidden
<input type="hidden" value="Escondido"/>

Usos do Hidden : Input type text visibility:Hidden
<input type="text" value"Escondido" style="visibility:hidden" />

Nota : Display:none; retira o campo do documento, sequer ocupa espaço.
visibility:hidden não exibe o campo no documento mas o espaço para exibí-lo é reservado no documento. Acredito que o Display:none no submit do form também não retorne as informações ao servidor, não é enviado de volta.

Outro detalhe é que a tag com estilo ou hidden ela continua ocupando espaço no documento, visível ou não.




Exemplo de funcionamento 1 - Input type text:

Código do exemplo acima:
    <script>
        function exibeesconde() {
            var x = document.getElementById("txtexibeesconde");
            if (x.style.visibility === 'hidden') {
                x.style.visibility = 'visible';
            } else {
                x.style.visibility = 'hidden';
            }
        }
    </script>

<input id="txtexibeesconde" type="text" value="Escondido" /><button onclick="exibeesconde()">Exibe/Esconde</button>




Exemplo de funcionamento 2 - Menu :

Visite as páginas com Exemplos de Menu. Muitos menus tem a função de esconder e exibir itens via JavaScript e o atributo hidden. Dá pra fazer um bom menu com simples Html e um pouco de javaScript. Se bem que recomendo o BootStrap para fazer isto.